<template>
  <div class="content">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider>精准查询</el-divider>
    <el-row class="btn">
      <el-form class="infoForm" inline :model="formInline">
            <el-form-item
              label="用户昵称"
              prop="nickName"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="formInline.nickName"
                autocomplete="off"
                placeholder="请输入昵称"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="用户id"
              prop="userId"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="formInline.userId"
                autocomplete="off"
                placeholder="请输入用户id"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
              <el-input
                v-model="formInline.email"
                autocomplete="off"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="手机号码"
              prop="phone"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="formInline.phone"
                autocomplete="off"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="用户角色"
              prop="role"
              :label-width="formLabelWidth"
            >
              <el-select v-model="formInline.role" placeholder="请选择角色">
                <el-option label="普通用户" value="0"></el-option>
                <el-option label="管理员" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item><el-button   @click="onReset">取消</el-button><el-button type="primary" @click="getList">查询</el-button></el-form-item>
        </el-form>
    </el-row>
    <el-row v-if="tableData.length===0">暂未存在用户，请先创建。</el-row>
    <div class='main' v-else>
       <el-table
       stripe
       border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="joinTime"
        label="创建日期"
        width="180">
        <!-- <template slot-scope="scope">{{scope.row.role==1?'管理员':"普通用户"}}</template> -->
      </el-table-column>
      <el-table-column
        prop="userId"
        label="用户id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="nickName"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="role"
        label="角色">
        <template slot-scope="scope">{{scope.row.role==1?'管理员':"普通用户"}}</template>
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <!-- <el-button
          size="mini"
          @click="onEdit(scope.row, scope.$index)">编辑</el-button> -->
        <el-button
          size="mini"
          type="danger"
          @click="onDelete(scope.row, scope.$index)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    </div>
  </div>
</template>

<script>

export default {
  name: "tableData",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem('user')) || null,
      loading:false,
      isChange:false,
      timer:null,
      tableData:[],
      formInline: {},
      formLabelWidth: "100px",
    };
  },
  created() {
    this.getList()
  },
  methods: {
    toLogin() {
      this.$emit('toLogin')
    },
    onReset(){
      // this.formInline = {}
      this.$set(this,"formInline",{})
      this.getList()
    },
    done(){},
    // 创建/修改/查看用户
    onCreat(type,row,idx){
      this.$router.push({
        name:'map',
      query:{
        type:type?type:null,
        ...row
      }
    })
    },
     // 获取用户列表
     getList(){
      this.$api.getUserList({...this.formInline}).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.tableData = res.data
        } else {
              this.$message.error(res.msg);
            }
          });
    },
    // 删除用户
    onDelete(row,index){
      this.$api.delUserById({id:row.userId}).then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.getList()
        } else {
              this.$message.error(res.msg);
            }
          });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 80%;
  padding: 50px 0;
  margin: 0 auto;
  .btn  {
    margin: 20px;
  }
  .main {
    // display: grid;
    // // grid-template-columns: repeat(6, 1fr);
    // grid-template-columns: repeat(6, minmax(200px, 1fr));
    // grid-gap: 30px;
  }
}
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
    .bottomOS {
          display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    }
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
